<template>
  <el-drawer
    :model-value="drawerVisible"
    title="详情"
    direction="rtl"
    size="60%"
    @close="close"
  >
    <h4>基本信息</h4>
    <div class="textBody">
      <div class="detailRow">
        <span class="rowName">商户id：</span>
        <span class="rowValue"> {{ detailInfo.merchant_id }}</span>
      </div>
      <div class="detailRow">
        <span class="rowName">付款金额：</span>
        <span class="rowValue">
          {{ detailInfo.amount }} {{ detailInfo.currency }}</span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">付款时间：</span>
        <p class="rowValue" v-if="detailInfo.sends.length">
            <p v-for="item of detailInfo.sends">
                {{ formatDates(item.send_pay_time) || "--" }}
            </p>
        </p>
        <p class="rowValue" v-else>--</p>
      </div>
      <div class="detailRow">
        <span class="rowName">订单状态：</span>
        <span class="rowValue">
          <el-tag
            :type="
              detailInfo.status == 1
                ? 'success'
                : detailInfo.status == 0
                ? 'warning'
                : 'danger'
            "
          >
            {{
              detailInfo.status == 1
                ? "成功"
                : detailInfo.status == 2
                ? "失败"
                : detailInfo.status == 3
                ? "取消"
                : "处理中"
            }}
          </el-tag></span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">商户审核：</span>
        <span class="rowValue">
          <el-tag
            :type="
              detailInfo.mer_review_status == 1
                ? 'success'
                : detailInfo.mer_review_status == 0
                ? 'warning'
                : 'danger'
            "
          >
            {{
              detailInfo.mer_review_status == 1
                ? "已审核"
                : detailInfo.mer_review_status == 2
                ? "拒绝"
                : "未审核"
            }}
          </el-tag></span
        >
      </div>
      <div class="detailRow">
        <span class="rowName">系统审核：</span>
        <span class="rowValue">
          <el-tag
            :type="
              detailInfo.sys_review_status == 1
                ? 'success'
                : detailInfo.sys_review_status == 0
                ? 'warning'
                : 'danger'
            "
          >
            {{
              detailInfo.sys_review_status == 1
                ? "已审核"
                : detailInfo.sys_review_status == 2
                ? "拒绝"
                : "未审核"
            }}
          </el-tag></span
        >
      </div>  
      <div class="detailRow">
        <span class="rowName">审核人：</span>
        <span class="rowValue"> {{ detailInfo.sys_auditor }} </span>
      </div>
      <div class="detailRow">
        <span class="rowName">审核时间：</span>
        <span class="rowValue">
          {{ formatDates(detailInfo.sys_audit_time) }}
        </span>
      </div>
      <div class="detailRow">
        <span class="rowName">订单流水号：</span>
        <span class="rowValue"> {{ detailInfo.order_no }}</span>
      </div>
    </div>
    <h4>付款信息</h4>
    <div class="textBody">
      <el-table :data="detailInfo.sends" style="width: 100%">
        <el-table-column prop="send_bank" label="付款银行" align="center" width="120">
          <template #default="scope">
            {{ scope.row.send_bank }} {{ scope.row.send_branch }}
          </template>
        </el-table-column>
        <el-table-column prop="send_card_number" label="付款账号" align="center"/>
        <el-table-column prop="send_card_name" label="付款人" align="center"/>
        <el-table-column prop="send_amount" label="付款金额" align="center">
          <template #default="scope">
            {{ scope.row.send_amount }} {{ scope.row.send_currency }}
          </template>
        </el-table-column>
        <el-table-column
          :formatter="formatterTime"
          prop="send_pay_time"
          label="付款时间"
          align="center"
        />
        <el-table-column prop="send_swift_code" label="Swift码" align="center">
          <template #default="scope">
            {{ scope.row.send_swift_code || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="send_extended" label="补充信息" align="center">
          <template #default="scope">
            {{ scope.row.send_extended || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="payment_way" label="支付方式" align="center">
          <template #default="scope">
            {{ scope.row.payment_way || "--" }}
          </template>
        </el-table-column>
        <el-table-column label="支付流水号">
          <template #default="scope">
            {{ scope.row.payment_order_no || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="attachments" label="支付凭证">
          <template #default="scope">
            <el-image
              style="width: 50px; height: 50px"
              v-for="i in scope.row.attachments"
              :src="i"
              alt
              fit="fill"
              :preview-src-list="[i]"
              :preview-teleported="true"
            />
          </template>
        </el-table-column>
        <el-table-column prop="is_refund" label="是否退款" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.is_refund == 1 ? 'success' : 'danger'">
                {{ scope.row.is_refund == 1 ? "是" : "否" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="退款金额" align="center">
            <template #default="scope"
              ><span>{{ scope.row.refund_amount }}</span></template
            >
          </el-table-column>
      </el-table>
    </div>
    <h4>收款信息</h4>
    <div class="textBody">
      <el-table :data="[detailInfo]" style="width: 100%">
        <el-table-column prop="receive_name" label="收款名称" align="center" width="100">
          <template #default="scope">
             <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.receive_name"
                placement="top"
              >
                <span class="ellipsis">{{ scope.row.receive_name }}</span>
              </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="receive_bank" label="收款银行" align="center">
          <template #default="scope">
            {{ scope.row.receive_bank }} {{ scope.row.receive_branch }}
          </template>
        </el-table-column>
        <el-table-column prop="receive_card_number" label="收款账号" align="center"/>
        <el-table-column prop="receive_card_name" label="收款姓名" align="center"/>
        <el-table-column prop="receive_swift_code" label="Swift码" align="center">
          <template #default="scope">
            {{ scope.row.receive_swift_code || "--" }}
          </template>
        </el-table-column>
        <el-table-column prop="receive_extended" label="补充信息" align="center">
          <template #default="scope">
            {{ scope.row.receive_extended || "--" }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>
<script setup>
import { formatDates, formatterTime } from "@/utils/utils";

defineProps({
  drawerVisible: {
    type: Boolean,
    default: false,
  },
  detailInfo: { type: Object, default: {} },
});
const emits = defineEmits(["close", "handleOperate"]);

const close = () => {
  emits("close");
};

const handleOperate = (index, row, type) => {
  emits("handleOperate", index, row, type);
};
</script>
<style lang="scss" scoped>
.textBody {
  margin: 2% 0;
}
.detailRow {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 1%;

  .rowName {
    min-width: 30%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .rowValue {
    word-break: break-all;
    p{
        margin: 1% 0
    }
    // text-align: right;
  }
}
</style>
